<template>
	<view class="orderfound">
		<view class="imgbox">
			<view class="imgitem upimg">
				<image src="/static/img/add.png" mode="widthFix"></image>
			</view>
			<view class="imgitem" v-for="(item,index) in imgList" :key="index">
				<image :src="item.img" mode=""></image>
				<label v-show="is_set">
					<checkbox @click="changeRadio(item,index)" :checked="item.is_checked" />
				</label>
			</view>
		</view>
		<view class="btns" v-show="!is_set">
			<button class="btn" @click="edit">编辑</button>
		</view>
		<view class="btns set_btn" v-show="is_set">
			<button class="cancel" @click="cancel">取消</button>
			<button class="delet" type="warn" @click="deleteImg">删除</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_set: false,
				imgList: [{
						id: 1,
						img: '/static/new/2.png',
						is_checked: false
					},
					{
						id: 2,
						img: '/static/new/2.png',
						is_checked: false
					},
					{
						id: 3,
						img: '/static/new/2.png',
						is_checked: false
					},
					{
						id: 4,
						img: '/static/new/2.png',
						is_checked: false
					}
				],
				checkboxList: []
			}
		},
		onLoad() {

		},
		methods: {
			changeRadio(item, i) {
				this.$set(this.imgList[i], 'is_checked', !item.is_checked)
			},
			edit() {
				this.is_set = true
			},
			cancel() {
				this.imgList.forEach(item => {
					item.is_checked = false
				})
				this.is_set = false
			},
			deleteImg() {
				this.imgList.forEach(item => {
					if (item.is_checked) {
						console.log(item);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		padding-bottom: 55px;
	}



	.imgbox {
		display: flex;
		flex-wrap: wrap;



		.imgitem {
			width: 25%;
			text-align: center;
			position: relative;
			margin: 4px 0;

			checkbox {
				position: absolute;
				left: 5px;
				top: 2px;
				transform: scale(0.9);
				border: 0;
				outline: 0;
			}
		}

		image {
			width: 90%;
			height: 90px;
		}
	}

	.btns {
		position: fixed;
		bottom: 0;
		z-index: 9999;
		width: 100%;
		padding: 10px 0;
		background: #fff;

		.btn {
			background: #00b000;
			color: #fff;
			width: 80%;
			height: 40px;
			line-height: 40px;
		}
	}

	.set_btn {
		display: flex;

		.cancel {
			width: 30%;
		}

		.delet {
			width: 60%;
		}
	}
</style>
